<template>
    <div class="hospital">
        <!--左侧导航区-->
        <div class="menu">
            <div class="top">
                <el-icon><House/></el-icon>
                <span> / 医院信息</span>
            </div>
            <el-menu :default-active="$route.path" class="el-menu-vertical-demo">
                <el-menu-item index="/hospital/detail" @click="showDetail">
                  <el-icon><Calendar /></el-icon>
                  <span>医院详情</span>
                </el-menu-item>
                <el-menu-item index="/hospital/register" @click="showRegister">
                  <el-icon><document /></el-icon>
                  <span>预约挂号</span>
                </el-menu-item>
                <el-menu-item index="/hospital/notice" @click="showNotice">
                  <el-icon><AlarmClock /></el-icon>
                  <span>预约须知</span>
                </el-menu-item>
                <el-menu-item index="/hospital/close" @click="showClose">
                  <el-icon><Warning /></el-icon>
                  <span>停诊信息</span>
                </el-menu-item>
                <el-menu-item index="/hospital/cancel" @click="showCancel">
                  <el-icon><Search /></el-icon>
                  <span>查询/取消</span>
                </el-menu-item>
            </el-menu>
        </div>
        <!--右侧展示内容区域-->
        <div class="content">
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts" name="hospital">
    // 引入组件的图标
    import {Document,Warning,Search,Calendar,AlarmClock,House} from '@element-plus/icons-vue'
    import {useRouter,RouterView,useRoute} from "vue-router";
    import {onMounted} from "vue";
    import useDetailStore from '@/store/modules/hospitalDetail'

    let $router = useRouter() // 路由跳转组件
    let $route = useRoute()  // 获取当前路由

    function showDetail(){
        $router.push({path:'/hospital/detail',query:{hoscode:$route.query.hoscode}});
    }
    function showRegister(){
        $router.push({path:'/hospital/register',query:{hoscode:$route.query.hoscode}});
    }
    function showNotice(){
        $router.push({path:'/hospital/notice',query:{hoscode:$route.query.hoscode}});
    }
    function showClose(){
        $router.push({path:'/hospital/close',query:{hoscode:$route.query.hoscode}});
    }
    function showCancel(){
        $router.push({path:'/hospital/cancel',query:{hoscode:$route.query.hoscode}});
    }

    let detailStore = useDetailStore()
    // 组件挂载完毕，通知pinia发请求获取医院详情数据，存储到仓库中
    onMounted(()=>{
        // 获取医院详情数据
        detailStore.getHospitalDetail(<string>$route.query.hoscode)
        // 获取某一个医院科室的数据
        detailStore.getDepartment(<string>$route.query.hoscode)
    })
</script>

<style scoped>
    .hospital{
        margin: 20px;
        display: flex;
        .menu{
            flex: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            .top{
                color: #7f7f7f;
                display: flex;
                align-items: center;
                span{
                    margin-left: 10px;
                }
            }
        }
        .content{
            flex: 8;
        }
    }
</style>